<template>
  <view class="content">
    <u-action-sheet
      :actions="actionList"
      @select="selectClick"
      @close="show = false"
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      :show="show"
    ></u-action-sheet>
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :down="{ use: false }"
    >
      <view class="section-1">
        <view class="section-body">
          <view class="list">
            <view class="item" v-for="item in list" :key="item.id">
              <view class="top">
                <view class="left">
                  <view class="part"> 施工项目：{{ item.sg_name }} </view>
                  <view class="part">
                    计划时间：{{ item.start_time.substring(0, 10) }}
                  </view>
                  <view class="part">
                    完成时间：{{ item.end_time.substring(0, 10) }}
                  </view>
                  <view class="part"> 联系人：{{ item.zrr_name }} </view>
                </view>
                <view class="right" @click="showAction(item)">
                  <view class="iconfont icon-caidan"></view>
                </view>
              </view>
              <view class="mid">
                <view class="label">问题备注：</view>
                <view class="textarea-body">{{ item.remark }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getFourwayList, deleteFourwayList } from "@/api/zhengchu.js";
export default {
  data() {
    return {
      mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
      upOption: {
        textNoMore: "-- 没有更多了 --",
      },
      information: "",
      pageSize: 20,
      list: [],
      show: false,
      curItem: {},
      project_id: "",
      actionList: [
        {
          name: "修改",
        },
        {
          state: 3,
          name: "删除",
        },
      ],
    };
  },
  onNavigationBarButtonTap(res) {
    //添加按钮  点击跳转
    uni.navigateTo({
      url: "/pages/work/manager/engineering_prev/details/addFourway",
    });
  },
  computed: {
    ...mapGetters({
      curProject: "system/getCurProject",
    }),
  },
  // onShow() {
  //   this.mescroll.resetUpScroll();
  // },
  // onBackPress(event) {
  //   // console.log(event)
  //   // if (event.from === 'backbutton') {
  //   // uni.navigateBack()
  //   // }
  //   uni.navigateTo({
  //     url: "/pages/work/manager/construction/progress/index",
  //   });

  //   return true;
  // },
  methods: {
    selectClick(item) {
      if (item.state) {
        this.deleteFourway();
        console.log("删除");
      } else {
        let params = {
          id: this.information.id,
          sg_name: this.information.sg_name,
          start_time: this.information.start_time,
          end_time: this.information.end_time,
          zrr_name: this.information.zrr_name,
          remark: this.information.remark,
        };
        uni.navigateTo({
          url:
            "/pages/work/manager/engineering_prev/details/addFourway?id=" +
            this.curItem.id +
            "&params=" +
            JSON.stringify(params),
        });
      }
    },
    //删除
    async deleteFourway() {
      const { data } = await deleteFourwayList({
        id: this.information.id,
      });
      if (data.code === 1) {
        uni.showToast({
          title: "删除成功",
          duration: 1000,
          icon: "success",
        });
        this.handleResetForm();
      } else {
        uni.showToast({
          title: "删除失败",
          duration: 1000,
          icon: "error",
        });
      }
    },

    showAction(item) {
      this.show = true;
      this.information = item;
    },
    previewImage(url) {
      uni.previewImage({
        urls: [url],
      });
    },

    handleResetForm() {
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.mescroll.resetUpScroll();
      this.mescroll.scrollTo(0, 0);
    },
    handleSearch() {
      this.mescroll.resetUpScroll();
      this.mescroll.scrollTo(0, 0);
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    async upCallback(page) {
      const { data } = await getFourwayList({
        project_id: this.curProject.id,
      });
      if (data.code == 1) {
        this.list = data.data.data;
        console.log(this.list, "数据");
        this.mescroll.endErr();
      } else {
        //  请求失败,隐藏加载状态
        this.mescroll.endErr();
      }
    },
    onShow() {
      this.upCallback();
    },
    onLoad(e) {
      // console.log(e)
      uni.hideLoading();
      // this.project_id=e.parmas
      // console.log(this.project_id,'2222')
    },
  },
};
</script>

<style lang="scss" scoped>
.section-1 {
  width: 100%;
  background: #2e5efe;

  .section-body {
    width: 100%;
    height: 100%;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    background-color: #fff;
    overflow: hidden;
  }

  .list {
    width: 100%;
    box-sizing: border-box;
    padding: 0 35rpx;
    padding-top: 40rpx;

    .item {
      width: 100%;
      border-radius: 30rpx;
      @include common-box-shadow;
      margin-bottom: 40rpx;
      box-sizing: border-box;
      padding: 30rpx 20rpx;
      position: relative;

      .top {
        width: 100%;
        @include clear;
        margin-bottom: 10rpx;

        .left {
          width: 480rpx;
          @include font-normal float: left;

          .part {
            width: 100%;
            line-height: 30rpx;
            margin-bottom: 10rpx;
          }
        }

        .right {
          text-align: right;
          width: calc(100% - 480rpx);
          color: #1534ce;
          float: left;

          .iconfont {
            font-weight: bold;
            font-size: 34rpx;
          }
        }
      }

      .mid {
        margin-bottom: 20rpx;

        .label {
          @include font-normal;
          margin-bottom: 10rpx;
        }

        .textarea-body {
          box-sizing: border-box;
          width: 100%;
          height: 150rpx;
          border: none;
          padding: 15rpx !important;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          font-size: 25rpx;
          border-radius: 15rpx;
          background-color: #ededed;
          color: #3b3c40;
          overflow: auto;
          word-wrap: break-word;
        }
      }

      .bottom {
        position: relative;
        width: 100%;
        font-size: 18rpx;
        color: #3b3c40;

        .label {
          @include font-normal;
          margin-bottom: 10rpx;
        }

        /deep/ .u-fade-enter-active {
          background-color: rgba(0, 0, 0, 0) !important;
        }
      }

      .finish {
        position: absolute;
        right: 100rpx;
        top: 30rpx;

        image {
          width: 134rpx;
          height: 134rpx;
        }
      }
    }
  }
}
</style>
